<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">咨询师列表</view>
			<image src="/static/icons/search.svg" @click="toggleSearch" class="nav-icon"></image>
			<image src="/static/icons/sorting.svg" @click="toggleSort" class="nav-icon"></image>
			<image src="/static/icons/filter.svg" @click="toggleFilter" class="nav-icon"></image>
		</view>
		
		<!--搜索框-->
		<view v-if="showSearch" class="search-box">
			<u-search v-model="searchKeyword" height="64rpx" placeholder="搜索咨询师姓名" @search="doSearch" show-action action-text="搜索" @custom="doSearch" />
		</view>
		<!--筛选框-->
		<u-popup :show="showFilter" mode="center" border-radius="14" @close="showFilter=false">
			<view class="filter-box">
				<text class="filter-title">筛选条件</text>
				<!-- 这里可以放筛选项，比如标签、多选框等 -->
				<view class="filter-options">
					<view
						class="tag-option"
						v-for="tag in allTags"
						:key="tag"
						:class="{ active: selectedTags.includes(tag) }"
						@click="toggleTag(tag)"
					>
						{{ tag }}
					</view>
				</view>
				<view class="filter-actions">
					<button @click="applyFilter">确认</button>
				</view>
			</view>
		</u-popup>
		
		<!--排序选择框-->
		<u-popup :show="showSort" mode="center" border-radius="14"  @close="showSort=false">
			<view class="sort-popup">
				<view class="sort-title">排序方式</view>
		
				<view class="sort-section">
					<text class="sort-subtitle">排序字段</text>
					<view class="sort-options">
						<view
							v-for="field in ['rating', 'experience']"
							:key="field"
							:class="['sort-option', sortField === field ? 'active' : '']"
							@click="sortField = field"
						>
							{{ field === 'rating' ? '评分' : '从业经验' }}
						</view>
					</view>
				</view>
		
				<view class="sort-section">
					<text class="sort-subtitle">排序方向</text>
					<view class="sort-options">
						<view
							v-for="order in ['asc', 'desc']"
							:key="order"
							:class="['sort-option', sortOrder === order ? 'active' : '']"
							@click="sortOrder = order"
						>
							{{ order === 'asc' ? '升序' : '降序' }}
						</view>
					</view>
				</view>
		
				<view class="sort-actions">
					<button @click="applySort">确认</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 加载状态 -->
		<view v-if="isLoading" class="loading">
			<u-loading-icon size="40" mode="circle"></u-loading-icon>
		</view>
		

		<!-- 咨询师列表 -->
		<view v-else class="consultant-list">
			<view v-for="(item, index) in consultants" :key="index" class="consultant-card">
				<view class="card-header">
					<view class="avatar-container">
						<u-image :src="item.avatar" width="120rpx" height="120rpx" shape="circle"></u-image>
						<view class="rating-badge" v-if="item.rating">
							<u-icon name="star-fill" color="#FFD700" size="24"></u-icon>
							<text>{{item.rating}}</text>
						</view>
					</view>
					<view class="info-container">
						<view class="name-row">
							<text class="name">{{ item.name }}</text>
							<view class="tags">
								<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
							</view>
						</view>
						<view class="expertise">
							<text class="label">擅长：</text>
							<text class="value">{{ item.expertise.join(',') }}</text>
						</view>
						<view class="experience">
							<text class="label">从业经验：</text>
							<text class="value">{{ item.experience || 0 }}年</text>
						</view>
					</view>
				</view>
				<view class="card-footer">
					<button class="appointment-btn" @click="handleAppointment(item)">
						<u-icon name="calendar" size="24" color="#ffffff"></u-icon>
						<text>立即预约</text>
					</button>
				</view>
			</view>
		</view>
		
		<!-- 分页栏 -->
		<view class="pagination" v-if="totalPages>1">
			<uni-pagination
				v-model="page"
				:total="totalConsultants"
				:page-size="pageSize"
				mode="multi"
				@change="handlePageChange"
			/>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			consultants: [], // 咨询师列表
			isLoading: true ,// 加载状态
			showSearch: false,
			searchKeyword: '',
			showFilter:false,
			showSort: false,
			sortOrder: 'desc' ,// asc 或 desc
			sortField:'rating',
			allTags: [
						'个人成长', '情绪管理', '心理健康', '婚姻家庭',
						'恋爱心理', '人际管理', '职场心理', '亲子教育', '性心理'
					],
			selectedTags: [],
			page:1,
			pageSize:4,
			totalPages:1,
			totalConsultants:0,
		}
	},
	async onLoad() {
		await this.fetchConsultants();
	},
	methods: {
		async searchConsultants(){
			const res = await uniCloud.callFunction({
				name: 'searchConsultants',
				data: {
					searchKeyword: this.searchKeyword,
					page: this.currentPage,
					pageSize: this.pageSize,
					sortField: this.sortField,
					sortOrder: this.sortOrder
				}
			});
			console.log(res)
			this.consultants = res.result.data.consultants;
			this.totalConsultants= res.result.data.total;
			this.totalPages = res.result.data.totalPages;
		},
		async fetchConsultants() {
				//ToDo,改进getConsultants，使得他能根据参数返回咨询师list
			try {
				console.log(this.sortField)
				const res = await uniCloud.callFunction({
					name: 'getConsultants',
					data:{
						tags:this.selectedTags,
						sortField:this.sortField,
						sortOrder:this.sortOrder,
						page:this.page,
						pageSize:this.pageSize
					}
				});
				console.log(res)
				
				if (res.result && res.result.data) {
					this.consultants = res.result.data.consultants;
					this.totalPages = res.result.data.totalPages;
					this.totalConsultants = res.result.data.total;
				} else {
					uni.showToast({
						title: '获取咨询师列表失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取咨询师数据失败:', error);
				uni.showToast({
					title: '获取咨询师列表失败',
					icon: 'none'
				});
			} finally {
				this.isLoading = false;
			}
		},
		handlePageChange(e){
			console.log(e);
			this.page = e.current;
			this.fetchConsultants();
		},
		handleAppointment(consultant) {
			uni.navigateTo({
				url: `/pages/appointment/appoint?uniIdToken=${consultant.uniIdToken}`
			});
		},
		
		toggleSearch() {
			this.searchKeyword="";
			this.showSearch = !this.showSearch;
		},
		doSearch() {
			// Todo根据关键词发请求
			console.log('搜索关键词：', this.searchKeyword);
			this.searchConsultants();
		},
		toggleFilter() {
				this.showFilter = true;
			},
		applyFilter() {
			this.page = 1;
			this.showFilter = false;
			this.fetchConsultants();
		},
		toggleSort(){
			this.showSort = !this.showSort;
		},
		applySort() {
			this.page = 1;
			this.showSort = false;
			this.fetchConsultants();
			},
		toggleTag(tag){
			if (this.selectedTags.includes(tag)) {
				this.selectedTags = this.selectedTags.filter(t => t !== tag);
			} else {
				this.selectedTags.push(tag);
			}
		},
	}
}
</script>

<style lang="scss">
/* 全局变量 */
:root {
	--primary-color: #6c8eef;
	--primary-hover: #5a7de0;
	--secondary-color: #f8f9fa;
	--text-color: #2c3e50;
	--border-color: #dee2e6;
	--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
	--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
	--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
	--radius-sm: 16rpx;
	--radius-md: 24rpx;
	--radius-lg: 32rpx;
	--spacing-sm: 16rpx;
	--spacing-md: 32rpx;
	--spacing-lg: 48rpx;
}

/* 主内容区样式 */
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 30rpx;
}

.nav-bar {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
	padding: 0 20rpx;
	.nav-icon{
		width:60rpx;
		height: 45rpx;
	}
	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		position: relative;
		padding-left: 20rpx;
		flex:1;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 32rpx;
			background: #6c8eef;
			border-radius: 4rpx;
		}
	}
}

.consultant-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.consultant-card {
	background: white;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.1);
	transition: all 0.3s ease;

	&:active {
		transform: translateY(-2rpx);
		box-shadow: 0 12rpx 24rpx rgba(108, 142, 239, 0.2);
	}
}

.card-header {
	display: flex;
	gap: 30rpx;
	margin-bottom: 30rpx;
}

.avatar-container {
	position: relative;
	width: 120rpx;
	height: 120rpx;

	.rating-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		background: white;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
		display: flex;
		align-items: center;
		gap: 4rpx;

		text {
			font-size: 24rpx;
			color: #f0ad4e;
			font-weight: 500;
		}
	}
}

.info-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.name-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.name {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--text-color);
}

.tags {
	display: flex;
	gap: 8rpx;
}

.tag {
	font-size: 24rpx;
	color: var(--primary-color);
	background: rgba(108, 142, 239, 0.1);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.expertise, .experience {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 28rpx;
	color: #666;

	.label {
		color: #999;
	}
}

.card-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;
}

.appointment-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #6c8eef 0%, #5a7de0 100%);
	border-radius: 40rpx;
	border: none;
	color: white;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.3s ease;

	&:active {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.2);
	}

	text {
		color: white;
		font-weight: 500;
	}

	.u-icon {
		color: white !important;
	}
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.sort-popup {
	padding: 30rpx;
	background-color: #fff;
}
.sort-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.sort-subtitle {
	font-size: 28rpx;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}
.sort-options {
	display: flex;
	gap: 20rpx;
	flex-wrap: wrap;
}
.sort-option {
	padding: 16rpx 28rpx;
	border-radius: 50rpx;
	background-color: #f0f0f0;
	color: #666;
}
.sort-option.active {
	background-color: #007aff;
	color: white;
}
.sort-actions {
	margin-top: 30rpx;
	text-align: right;
}
.filter-box {
	padding: 40rpx;
	width: 600rpx;
	background-color: #fff;
	border-radius: 14rpx;
}
.filter-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}
.filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}
.tag-option {
	padding: 16rpx 28rpx;
	border-radius: 50rpx;
	background-color: #f0f0f0;
	color: #666;
	font-size: 28rpx;
}
.tag-option.active {
	background-color: #007aff;
	color: white;
}
.filter-actions {
	margin-top: 40rpx;
	text-align: right;
}

@media screen and (min-width: 690px) {
	.container {
		max-width: 800rpx;
		margin: 0 auto;
	}
}
</style> 